import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Space, Typography } from 'antd';
import { connect, FormattedMessage } from 'umi';
import OperpQuery from '@/components/OperpQuery';

const { Text } = Typography;
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      dataSource: [],
      visible: false,
      selectedRowKeys: [],
      freshNum: 1,
      totalAmt: 0,
    };
  }
  componentDidMount() {}
  onSelectChange = (selectedRowKeys: any, selectedRows: any) => {
    this.setState({ selectedRowKeys, selectedRows });
  };

  onDataLoad = (data: any) => {
    let totalAmt: number = 0;
    data.forEach((element: any) => {
      totalAmt += element.ExtCost;
    });
    const result = totalAmt.toFixed(2);
    this.setState({ totalAmt: result });
  };
  render() {
    const { freshNum, selectedRowKeys, totalAmt } = this.state;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    var months = [];
    for (var m = 1; m <= 12; m++) {
      months.push(m);
    }
    return (
      <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
        <Card>
          <OperpQuery
            rowSelection={rowSelection}
            sysReportName="ReportTranCost"
            scroll={{ x: 'max-content', y: '600px' }}
            freshNum={freshNum}
            bordered
            onload={(d) => this.onDataLoad(d)}
            footer={() => (
              <Space>
                <span>
                  <FormattedMessage id="pages.totalAamount" />
                  <Text type="danger" strong>
                    {totalAmt}
                  </Text>{' '}
                  <FormattedMessage id="pages.currencyUnit" />
                </span>
              </Space>
            )}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default connect(({ Abp, user }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: user.currentUser,
}))(ViewPage);
